<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="main" style="width: 100%; height: 400px"></div>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script src="https://unpkg.com/size-sensor/dist/size-sensor.min.js"></script>
    <script>
      const unbind1 = sizeSensor.bind(document.querySelector('#main'), (element) => {
        // console.log('element ', element);
        // do what you want to to.
        myChart.resize({
          width: 'auto',
          height: 'auto',
          animation: {
            duration: 1000,
          },
        });
      });

      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      let option = {
        // title: {
        //   text: 'ECharts 入门示例',
        // },
        tooltip: {},
        legend: {
          data: ['销量'],
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            itemStyle: {
              // 右-下-左-上
              // color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
              //   {
              //     offset: 0,
              //     color: 'red',
              //   },
              //   {
              //     offset: 1,
              //     color: 'blue',
              //   },
              // ]),

              color: {
                type: 'linear',
                x: 1, // 右
                y: 1, // 下
                x2: 0, // 左
                y2: 0, // 上
                colorStops: [
                  {
                    offset: 0,
                    color: 'red', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'blue', // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
              // opacity: 0.5,
            },
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>
</html>
